import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:hexcolor/hexcolor.dart';

class TableDemo extends StatefulWidget {
  @override
  _TableDemoState createState() => _TableDemoState();
}

class _TableDemoState extends State<TableDemo>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  List<String> _tabTitles = [
    "Tab1",
    "Tab2",
    "Tab3",
  ];

  List<DataColumn> _dataColumns = [];
  List<DataRow> _dataRows = [];

  List<Widget> _rowTitles = [];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _tabTitles.length, vsync: this);

    for (int i = 0; i < 100; i++) {
      List<DataCell> fadeData = [];
      // 表格每行名称-地区或运营商名称
      _rowTitles.add(
        Container(
            width: 80,
            height: 40.0,
            alignment: Alignment.center,
            padding: EdgeInsets.symmetric(horizontal: 8.0),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                top: BorderSide(color: HexColor('#dddddd'), width: 1),
                bottom: BorderSide(color: HexColor('#dddddd'), width: 1),
                right: BorderSide(color: HexColor('#dddddd'), width: 1),
              ),
            ),
            child: Text(
              "RowTitle${i + 1}",
              style: TextStyle(fontSize: 14.0, color: Color(0xff333333)),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            )),
      );

      for (int j = 0; j < 40; j++) {
        if (i == 0) {
          // 表格每一列的名称
          _dataColumns.add(
            DataColumn(
              // label: Text("ColumnTitle$j"),
              label: Container(
                // margin: EdgeInsets.only(left: -30),
                width: 280,
                height: 80.0,
                color: Colors.green,
              ),
            ),
          );
        }
        fadeData.add(
          DataCell(
            // Text(
            //   "$i$j",
            //   textAlign: TextAlign.center,
            //   style: TextStyle(fontSize: 14.0, color: Color(0xff666666)),
            // ),
            Container(
              height: 40.0,
              width: 300.0,
              color: Colors.red,
            ),
          ),
        );
      }
      _dataRows.add(DataRow(cells: fadeData));
    }

    _rowTitles.insert(
        0,
        Container(
          height: 80.0,
          color: Colors.red,
        ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.yellow,
        centerTitle: true,
        systemOverlayStyle: SystemUiOverlayStyle.dark,
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverFillRemaining(
            child: Column(
              children: [
                Expanded(
                    flex: 1,
                    child: Container(
                      color: Colors.white,
                      // child: TabBarView(
                      //   controller: _tabController,
                      //   physics: NeverScrollableScrollPhysics(),
                      //   children: <Widget>[

                      //     Container(),
                      //     Container(),
                      //   ],
                      // ),
                      child: ListView(
                        children: [
                          Row(
                            children: [
                              // 行名
                              Expanded(
                                  child: ListView(
                                physics: NeverScrollableScrollPhysics(),
                                shrinkWrap: true,
                                children: _rowTitles,
                              )),
                              Expanded(
                                flex: 3,
                                child: Padding(
                                  padding: EdgeInsets.all(0),
                                  child: ListView(
                                    physics: NeverScrollableScrollPhysics(),
                                    shrinkWrap: true,
                                    children: [
                                      SingleChildScrollView(
                                        scrollDirection: Axis.horizontal,
                                        child: DataTable(
                                          border: TableBorder.all(
                                            color: Colors.black,
                                            width: 1,
                                          ),
                                          headingTextStyle: const TextStyle(
                                              fontSize: 14.0,
                                              color: Colors.black,
                                              fontWeight: FontWeight.w600),
                                          sortAscending: false,
                                          showBottomBorder: false,
                                          showCheckboxColumn: false,
                                          dividerThickness: 0.0,
                                          columnSpacing: 1.0,
                                          headingRowHeight: 80.0,
                                          dataRowHeight: 40.0,
                                          columns: _dataColumns,
                                          // 列名
                                          rows: _dataRows, // 数据
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              ),
                            ],
                          )
                        ],
                      ),
                    )),
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  // 返回事件
  onBack() {}

  // Search
  doSearch() {}

  //每一行标题的点击事件
  onTitleTap(int i) {}
}
